<template>
  <div class="client-home">
    <!-- 案件概览头部 -->
    <div class="case-header">
      <div class="case-main-info">
        <div class="case-title">
          <h2>{{ currentCase.title }}</h2>
          <div class="case-meta">
            <span class="case-number">案件编号：{{ currentCase.number }}</span>
            <span class="case-type">{{ currentCase.type }}</span>
          </div>
        </div>
        <div class="case-details">
          <div class="detail-item">
            <i class="fas fa-user-tie"></i>
            <span>承办律师：{{ currentCase.lawyer }}</span>
          </div>
          <div class="detail-item">
            <i class="fas fa-building"></i>
            <span>受理法院：{{ currentCase.court }}</span>
          </div>
          <div class="detail-item">
            <i class="fas fa-calendar"></i>
            <span>立案日期：{{ currentCase.filingDate }}</span>
          </div>
        </div>
      </div>
      <div class="case-status">
        <div class="current-stage">
          <div class="stage-label">当前阶段</div>
          <div class="stage-name">{{ currentStageDisplay }}</div>
        </div>
        <div class="next-action">
          <div class="action-label">下一步行动</div>
          <div class="action-name">{{ currentCase.nextAction }}</div>
          <div class="deadline">截止：{{ currentCase.deadline }}</div>
        </div>
      </div>
    </div>

    <!-- 案件办结评价提醒 -->
    <div v-if="showEvaluationReminder" class="evaluation-reminder">
      <div class="reminder-content">
        <div class="reminder-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="reminder-text">
          <h4>案件已办结，请为我们的服务评价</h4>
          <p>您的评价对我们很重要，帮助我们提供更好的法律服务</p>
        </div>
        <div class="reminder-actions">
          <button @click="goToEvaluation" class="btn-evaluate">立即评价</button>
          <button @click="dismissEvaluationReminder" class="btn-dismiss">稍后提醒</button>
        </div>
      </div>
    </div>

    <div class="content-container">
      <!-- 案件进度 -->
      <div class="section">
        <h3 class="section-title">
          <i class="fas fa-route"></i>
          案件进度
        </h3>
        <div class="process-timeline">
          <div 
            v-for="(phase, phaseIndex) in legalProcess" 
            :key="phaseIndex"
            class="phase-group"
            :class="{ 'is-current': phase.isCurrent, 'is-expanded': phase.isExpanded }"
          >
            <div class="phase-header" @click="togglePhase(phaseIndex)">
              <div class="phase-header-content">
                <h4>{{ phase.phase }}</h4>
                <div class="phase-status">
                  <span v-if="phase.isCompleted" class="phase-badge completed">
                    <i class="fas fa-check-circle"></i>
                    已完成 ({{ phase.completedCount }}/{{ phase.totalCount }})
                  </span>
                  <span v-else-if="phase.isCurrent" class="phase-badge current">
                    <i class="fas fa-clock"></i>
                    等待 {{ getCurrentWaitingAction(phase) }}
                  </span>
                  <span v-else class="phase-badge pending">
                    <i class="fas fa-hourglass-half"></i>
                    待开始 ({{ phase.completedCount }}/{{ phase.totalCount }})
                  </span>
                </div>
              </div>
              <div class="phase-toggle">
                <i class="fas fa-chevron-down transition-transform duration-300" 
                   :class="{ 'rotate-180': phase.isExpanded }"></i>
              </div>
            </div>
            <div class="stages-list" v-show="phase.isExpanded">
              <div 
                v-for="(stage, stageIndex) in phase.stages" 
                :key="stageIndex"
                class="stage-item"
                :class="stage.status"
              >
                <div class="stage-indicator">
                  <div class="stage-dot"></div>
                  <div v-if="stageIndex < phase.stages.length - 1" class="stage-line"></div>
                </div>
                <div class="stage-content">
                  <div class="stage-name">{{ stage.name }}</div>
                  <div class="stage-description">{{ stage.description }}</div>
                </div>
                <div class="stage-status">
                  <i v-if="stage.status === 'completed'" class="fas fa-check-circle"></i>
                  <i v-else-if="stage.status === 'current'" class="fas fa-clock"></i>
                  <i v-else class="fas fa-circle"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 待办事项 -->
      <div class="section">
        <h3 class="section-title">
          <i class="fas fa-tasks"></i>
          待办事项
          <span class="todo-count">{{ todoItems.filter(item => item.status === 'pending').length }}</span>
        </h3>
        <div class="todo-list">
          <div 
            v-for="todo in todoItems" 
            :key="todo.id"
            class="todo-item"
            :class="{ 'high-priority': todo.priority === 'high' }"
          >
            <div class="todo-priority">
              <div class="priority-indicator" :class="todo.priority"></div>
            </div>
            <div class="todo-content">
              <h4>{{ todo.title }}</h4>
              <p>{{ todo.description }}</p>
              <div class="todo-deadline">
                <i class="fas fa-calendar-alt"></i>
                截止日期：{{ todo.deadline }}
              </div>
            </div>
            <div class="todo-actions">
              <button class="btn-action primary">处理</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 案件动态 -->
      <div class="section">
        <h3 class="section-title collapsible-title" @click="toggleCaseDynamics">
          <i class="fas fa-bell"></i>
          案件动态
          <i class="fas fa-chevron-down toggle-icon" :class="{ 'rotated': caseDynamicsExpanded }"></i>
        </h3>
        <div v-show="caseDynamicsExpanded" class="updates-list">
          <div 
            v-for="(update, index) in caseUpdates" 
            :key="index"
            class="update-item"
          >
            <div class="update-icon" :class="update.type">
              <i v-if="update.type === 'document'" class="fas fa-file-alt"></i>
              <i v-else-if="update.type === 'court'" class="fas fa-gavel"></i>
              <i v-else-if="update.type === 'evidence'" class="fas fa-search"></i>
              <i v-else class="fas fa-info-circle"></i>
            </div>
            <div class="update-content">
              <div class="update-header">
                <h4>{{ update.title }}</h4>
                <span class="update-date">{{ update.date }}</span>
              </div>
              <p>{{ update.content }}</p>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

export default {
  name: 'ClientHome',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()

    // 案件动态折叠状态
    const caseDynamicsExpanded = ref(false)

    // 评价提醒显示状态
    const showEvaluationReminder = ref(false)

    // 当前交通事故案件信息
    const currentCase = ref({
      number: 'TA2024001789',
      type: '交通事故责任纠纷',
      title: '沪C88976机动车追尾交通事故人身损害赔偿案',
      lawyer: '李卫民律师（交通事故专业）',
      court: '上海市浦东新区人民法院',
      filingDate: '2024-01-18',
      currentStage: '伤残鉴定阶段',
      nextAction: '配合司法鉴定检查',
      deadline: '2024-02-20',
      status: 'completed' // 添加案件状态，用于演示评价提醒功能
    })

    // 交通事故案件法律处理流程
    const legalProcess = ref([
      {
        phase: '事故处理',
        stages: [
          { name: '现场处理', status: 'completed', description: '交警现场勘查，制作事故认定书' },
          { name: '保险报案', status: 'completed', description: '向双方保险公司报案备案' },
          { name: '医疗救治', status: 'completed', description: '紧急医疗救治，住院治疗28天' },
          { name: '案件委托', status: 'completed', description: '委托专业交通事故律师代理' }
        ]
      },
      {
        phase: '证据收集',
        stages: [
          { name: '事故证据', status: 'completed', description: '交通事故认定书、现场照片等' },
          { name: '医疗证据', status: 'completed', description: '病历、诊断书、医疗费票据' },
          { name: '伤残鉴定', status: 'current', description: '委托司法鉴定机构进行伤残等级鉴定' },
          { name: '损失计算', status: 'pending', description: '计算医疗费、误工费、精神损害等' }
        ]
      },
      {
        phase: '协商调解',
        stages: [
          { name: '保险理赔', status: 'pending', description: '与保险公司协商理赔方案' },
          { name: '人民调解', status: 'pending', description: '通过人民调解委员会调解' },
          { name: '司法调解', status: 'pending', description: '法院主持调解达成协议' }
        ]
      },
      {
        phase: '诉讼程序',
        stages: [
          { name: '起诉立案', status: 'pending', description: '调解不成功时向法院起诉' },
          { name: '庭审举证', status: 'pending', description: '法庭上进行举证质证' },
          { name: '判决执行', status: 'pending', description: '判决生效后强制执行' }
        ]
      }
    ])

    // 初始化流程阶段的状态
    const initializePhaseStatus = () => {
      legalProcess.value.forEach(phase => {
        const completedStages = phase.stages.filter(stage => stage.status === 'completed')
        const currentStages = phase.stages.filter(stage => stage.status === 'current')
        
        phase.completedCount = completedStages.length
        phase.totalCount = phase.stages.length
        phase.isCompleted = completedStages.length === phase.stages.length
        phase.isCurrent = currentStages.length > 0
        
        // 默认只展开当前正在进行的阶段
        phase.isExpanded = phase.isCurrent
      })
    }

    // 切换阶段展开/收起状态
    const togglePhase = (phaseIndex) => {
      legalProcess.value[phaseIndex].isExpanded = !legalProcess.value[phaseIndex].isExpanded
    }

    // 获取当前阶段等待的动作
    const getCurrentWaitingAction = (phase) => {
      const currentStage = phase.stages.find(stage => stage.status === 'current')
      if (currentStage) {
        return getStageWaitingAction(currentStage)
      }
      return '进度确认'
    }

    // 获取当前环节等待的动作
    const getStageWaitingAction = (stage) => {
      const waitingActions = {
        '伤残鉴定': '司法鉴定结果',
        '损失计算': '费用核算完成',
        '保险理赔': '保险公司确认',
        '人民调解': '调解方案确认',
        '司法调解': '法院调解结果',
        '起诉立案': '法院受理确认',
        '庭审举证': '庭审时间安排',
        '判决执行': '判决书生效'
      }
      return waitingActions[stage.name] || '相关部门处理'
    }

    // 计算当前阶段的显示文本
    const currentStageDisplay = computed(() => {
      // 查找当前正在进行的阶段
      for (const phase of legalProcess.value) {
        const currentStage = phase.stages.find(stage => stage.status === 'current')
        if (currentStage) {
          const waitingAction = getStageWaitingAction(currentStage)
          return `等待${waitingAction}`
        }
      }
      return '案件处理中'
    })

    // 交通事故案件待办事项
    const todoItems = ref([
      {
        id: 1,
        title: '参加伤残鉴定检查',
        description: '2024年2月16日上午9:00前往华东政法司法鉴定中心进行伤残等级鉴定',
        deadline: '2024-02-16',
        priority: 'high',
        status: 'pending'
      },
      {
        id: 2,
        title: '补充医疗费票据',
        description: '提供所有医疗费发票原件及明细清单，包括康复治疗费用',
        deadline: '2024-02-18',
        priority: 'high',
        status: 'pending'
      },
      {
        id: 3,
        title: '提供误工证明',
        description: '单位开具的误工证明、工资流水及收入证明材料',
        deadline: '2024-02-20',
        priority: 'medium',
        status: 'pending'
      },
      {
        id: 4,
        title: '车辆维修评估',
        description: '配合保险公司对受损车辆进行维修费用评估',
        deadline: '2024-02-22',
        priority: 'medium',
        status: 'pending'
      },
      {
        id: 5,
        title: '家属护理记录',
        description: '整理住院期间家属护理的时间记录和费用支出凭证',
        deadline: '2024-02-25',
        priority: 'low',
        status: 'pending'
      }
    ])

    // 交通事故案件动态
    const caseUpdates = ref([
      {
        date: '2024-02-10',
        title: '伤残鉴定预约成功',
        content: '已成功预约华东政法司法鉴定中心，鉴定时间：2024年2月16日上午9:00，请提前30分钟到达',
        type: 'document'
      },
      {
        date: '2024-02-05',
        title: '对方保险公司联系协商',
        content: '中国人保主动联系，提出初步理赔方案18万元，律师建议等伤残鉴定结果再决定',
        type: 'evidence'
      },
      {
        date: '2024-01-30',
        title: '医疗期满复查完成',
        content: '在上海六院完成最后一次复查，医生确认颈椎和腰椎功能恢复良好，可进行鉴定',
        type: 'document'
      },
      {
        date: '2024-01-25',
        title: '交通事故认定书送达',
        content: '浦东交警大队正式送达事故认定书，认定对方车辆承担事故全部责任',
        type: 'court'
      },
      {
        date: '2024-01-20',
        title: '律师团队组建完成',
        content: '由李卫民律师领衔的交通事故专业团队正式接手案件，制定详细维权策略',
        type: 'evidence'
      }
    ])

    const goToPage = (path) => {
      router.push(path)
    }

    // 切换案件动态折叠状态
    const toggleCaseDynamics = () => {
      caseDynamicsExpanded.value = !caseDynamicsExpanded.value
    }

    // 前往评价页面
    const goToEvaluation = () => {
      router.push('/client/evaluation')
    }

    // 暂时关闭评价提醒
    const dismissEvaluationReminder = () => {
      showEvaluationReminder.value = false
      // 这里可以设置一个延时，比如1天后再次提醒
      setTimeout(() => {
        showEvaluationReminder.value = true
      }, 24 * 60 * 60 * 1000) // 24小时后再次提醒
    }

    // 检查案件是否办结，决定是否显示评价提醒
    const checkCaseCompletion = () => {
      // 这里应该根据实际的案件状态来判断
      // 假设案件状态为 'completed' 时显示评价提醒
      const isCompleted = currentCase.value.status === 'completed'
      const hasEvaluated = localStorage.getItem(`case_${currentCase.value.number}_evaluated`) === 'true'
      showEvaluationReminder.value = isCompleted && !hasEvaluated
    }

    const formatTime = (time) => {
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      
      if (days === 0) return '今天'
      if (days === 1) return '昨天'
      if (days < 30) return `${days}天前`
      return date.toLocaleDateString()
    }

    onMounted(async () => {
      try {
        // 初始化流程阶段状态
        initializePhaseStatus()
        // 检查案件是否办结，决定是否显示评价提醒
        checkCaseCompletion()
        // 这里可以加载实际的案件数据
        console.log('加载案件数据...')
      } catch (error) {
        console.error('加载数据失败:', error)
      }
    })
    
    return {
      userStore,
      currentCase,
      currentStageDisplay,
      legalProcess,
      todoItems,
      caseUpdates,
      caseDynamicsExpanded,
      showEvaluationReminder,
      goToPage,
      formatTime,
      togglePhase,
      toggleCaseDynamics,
      goToEvaluation,
      dismissEvaluationReminder,
      checkCaseCompletion,
      initializePhaseStatus,
      getCurrentWaitingAction,
      getStageWaitingAction
    }
  }
}
</script>

<style scoped>
.client-home {
  min-height: 100vh;
  background: #f5f7fa;
}

.case-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
  margin-bottom: 24px;
}

.case-main-info {
  margin-bottom: 20px;
}

.case-title h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.case-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.case-number {
  font-size: 14px;
  opacity: 0.9;
}

.case-type {
  font-size: 14px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
}

.case-details {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.9;
}

.case-status {
  display: flex;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.current-stage, .next-action {
  flex: 1;
}

.stage-label, .action-label {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.stage-name, .action-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.deadline {
  font-size: 12px;
  opacity: 0.8;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.todo-count {
  background: #ff4757;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

/* 流程时间线 */
.process-timeline {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.phase-group {
  position: relative;
  border-radius: 12px;
  border: 1px solid #e0e7ff;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.phase-group:hover {
  border-color: #2c5aa0;
  box-shadow: 0 2px 8px rgba(44, 90, 160, 0.1);
}

.phase-group.is-current {
  border-color: #1976d2;
  background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
}

.phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #e0e7ff;
}

.phase-header:hover {
  background: #f1f5f9;
}

.phase-group.is-current .phase-header {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.phase-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.phase-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2c5aa0;
  margin: 0;
}

.phase-status {
  display: flex;
  align-items: center;
}

.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.phase-badge.completed {
  background: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.phase-badge.current {
  background: #fff3e0;
  color: #f57c00;
  border: 1px solid #ffcc02;
  animation: pulse-badge 2s infinite;
}

.phase-badge.pending {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.phase-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #666;
  transition: transform 0.3s ease;
}

.rotate-180 {
  transform: rotate(180deg);
}

.stages-list {
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #f0f0f0;
}

.stage-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  position: relative;
}

.stage-indicator {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  border: 2px solid #ddd;
  z-index: 2;
}

.stage-item.completed .stage-dot {
  background: #2e7d32;
  border-color: #2e7d32;
}

.stage-item.current .stage-dot {
  background: #1976d2;
  border-color: #1976d2;
  animation: pulse 2s infinite;
}

.stage-line {
  width: 2px;
  height: 40px;
  background: #ddd;
  margin-top: 4px;
}

.stage-item.completed .stage-line {
  background: #2e7d32;
}

.stage-content {
  flex: 1;
}

.stage-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stage-description {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.stage-status {
  font-size: 16px;
}

.stage-item.completed .stage-status {
  color: #2e7d32;
}

.stage-item.current .stage-status {
  color: #1976d2;
}

.stage-item.pending .stage-status {
  color: #ddd;
}

/* 待办事项 */
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.todo-item:hover {
  border-color: #2c5aa0;
  box-shadow: 0 2px 8px rgba(44, 90, 160, 0.1);
}

.todo-item.high-priority {
  border-left: 4px solid #ff4757;
}

.todo-priority {
  display: flex;
  align-items: center;
}

.priority-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.priority-indicator.high {
  background: #ff4757;
}

.priority-indicator.medium {
  background: #ffa502;
}

.priority-indicator.low {
  background: #2ed573;
}

.todo-content {
  flex: 1;
}

.todo-content h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.todo-content p {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
}

.todo-deadline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
}

.todo-actions {
  display: flex;
  align-items: center;
}

.btn-action {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-action.primary {
  background: #2c5aa0;
  color: white;
}

.btn-action.primary:hover {
  background: #1e3d6f;
}

/* 案件动态 */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.update-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.update-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
}

.update-icon.document {
  background: #3742fa;
}

.update-icon.court {
  background: #ff6b6b;
}

.update-icon.evidence {
  background: #26de81;
}

.update-content {
  flex: 1;
}

.update-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.update-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.update-date {
  font-size: 12px;
  color: #999;
}

.update-content p {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* 快捷操作 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.action-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-card:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #2c5aa0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.action-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.action-text p {
  font-size: 12px;
  color: #666;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
  }
}

@keyframes pulse-badge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Transition utilities */
.transition-transform {
  transition: transform 0.3s ease;
}

.duration-300 {
  transition-duration: 300ms;
}

/* 可折叠标题样式 */
.collapsible-title {
  cursor: pointer;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.collapsible-title:hover {
  color: #2c5aa0;
}

.toggle-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
  font-size: 14px;
}

.toggle-icon.rotated {
  transform: rotate(180deg);
}

/* 评价提醒样式 */
.evaluation-reminder {
  margin: 0 24px 24px;
  background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
  overflow: hidden;
}

.reminder-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  color: #2d3436;
}

.reminder-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f39c12;
  flex-shrink: 0;
}

.reminder-text {
  flex: 1;
}

.reminder-text h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #2d3436;
}

.reminder-text p {
  font-size: 14px;
  color: #636e72;
  margin: 0;
}

.reminder-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.btn-evaluate, .btn-dismiss {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-evaluate {
  background: #2d3436;
  color: white;
}

.btn-evaluate:hover {
  background: #636e72;
  transform: translateY(-1px);
}

.btn-dismiss {
  background: rgba(255, 255, 255, 0.9);
  color: #2d3436;
  border: 1px solid rgba(45, 52, 54, 0.2);
}

.btn-dismiss:hover {
  background: white;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .case-header {
    padding: 16px;
  }
  
  .case-details {
    flex-direction: column;
    gap: 12px;
  }
  
  .case-status {
    flex-direction: column;
    gap: 16px;
  }
  
  .content-container {
    padding: 0 16px;
  }
  
  .section {
    padding: 16px;
  }

  .evaluation-reminder {
    margin: 0 16px 16px;
  }

  .reminder-content {
    padding: 16px;
  }

  .reminder-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
  
  .todo-item {
    flex-direction: column;
    gap: 12px;
  }
  
  .todo-actions {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .case-title h2 {
    font-size: 20px;
  }
  
  .case-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .stages-list {
    padding: 12px 16px;
  }
  
  .stage-item {
    gap: 12px;
  }
  
  .phase-header {
    padding: 12px 16px;
  }
  
  .phase-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .phase-badge {
    font-size: 11px;
    padding: 3px 8px;
  }
}
</style>